<template>
	<el-container>
		<el-aside style="width: 200px; height: 480px; overflow-y: scroll;">
				<div style="height: 100%;">
					<el-tree
						ref="group"
						class="menu"
						node-key="id"
						:data="group"
						:current-node-key="''"
						:highlight-current="true"
						:expand-on-click-node="false"
						:default-expand-all="true"
						@node-click="groupClick"
					></el-tree>
				</div>
			</el-aside>
		<el-container style="height: 520px">
			<el-header>
				<vab-query-form-top-panel>
					<el-form
						inline
						label-width="49px"
						:model="queryList"
						style="margin-top: 5px"
					>
						<el-select
							placeholder="---请选择品牌---"
							v-model="queryList.BrandCode"
							style="width: 180px"
						>
							<el-option label="---请选择品牌---" value="" />
							<el-option
								v-for="item in optionsBrand"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
						&nbsp;
						<el-input
							v-model="queryList.GoodsCode"
							placeholder="请输入商品编码"
							style="width: 180px"
						></el-input>
						&nbsp;
						<el-input
							v-model="queryList.GoodsName"
							placeholder="请输入商品名称"
							style="width: 150px"
						></el-input>
						&nbsp;

						<el-button
							type="primary"
							@click="$refs.mytable.getData()"
							>查询</el-button
						>
					</el-form>
				</vab-query-form-top-panel>
			</el-header>
			<el-foot>
				<scTable
					ref="mytable"
					:data="listData"
					:attrList="attrList"
					:valueList="valueList"
					:queryList="queryList"
					:sort-orders="['ascending', 'descending']"
					@selection-change="selectionChange"
					row-key="Code"
					key="Code"
					stripe
					:hideDo="true"
					height="480px"
					style="max-height: 480px; min-width: 420"
				>
					<el-table-column
						type="selection"
						width="50"
						:selectable="selectable"
					>
						<!-- <template #default="scope">
            <el-checkbox :disabled="scope.row.ParentCode=='00'"></el-checkbox>
          </template> -->
					</el-table-column>
					<el-table-column
						type="index"
						label="序号"
						prop="rownumber"
						width="50"
					></el-table-column>

					<el-table-column
						label="商品主图"
						prop="MainAttachment"
						width="100"
						align="center"
					>
						<template #default="scope">
							<el-image
								style="height: 60px"
								:src="scope.row.Attachment"
								:fit="contain"
								:zoom-rate="1.2"
								:max-scale="7"
								:min-scale="0.2"
								:preview-src-list="[scope.row.Attachment]"
								:z-index="999"
								:preview-teleported="true"
							/>
						</template>
					</el-table-column>
					<el-table-column
						label="商品编码"
						prop="GoodsCode"
						width="100"
						sortable
					></el-table-column>
					<el-table-column
						label="商品名称"
						width="180"
						prop="GoodsName"
						sortable
					>
					</el-table-column>

					<el-table-column
						label="单位名称"
						prop="UomName"
						width="100"
						sortable
					>
					</el-table-column>
					<el-table-column
						prop="CostPrice"
						label="成本价"
						width="120"
					></el-table-column>
					<el-table-column
						prop="SalePrice"
						label="销售价"
						width="120"
					></el-table-column>
					<!-- <el-table-column
					label="品牌编码"
					prop="BrandCode"
					width="100"
					sortable
				></el-table-column>
				<el-table-column
					label="品牌名称"
					prop="BrandName"
					width="150"
					sortable
				></el-table-column> -->

					<el-table-column label="状态" prop="State" width="100">
						<template #default="scope">
							<el-switch
								v-model="scope.row.State"
								disabled
								active-value="启用"
								inactive-value="禁用"
							/>
						</template>
					</el-table-column> </scTable
			></el-foot>
		</el-container>
	</el-container>
</template>

<script>
import publicjs from "@/api/model/publicjs";
export default {
	name: "typelist",
	components: {
		publicjs,
	},
	props: {
		orgCode: { type: String, default: "" },
		brandCode: { type: String, default: "" },
	},
	data() {
		return {
			selectionRows: [],
			pkList: ["Code"],
			attrList: {
				Name: "BrandGoodsPrice",
				UseDistinct: false,
				OrgCode: "",
				UseBackUp: false,
				UseGroup: false,
			},
			valueList: {
				ItemCode: "ItemCode",
				GoodsCode: "GoodsCode",
				GoodsName2: "GoodsName",
				UomCode: "UomCode",
				UomName: "UomName",
				BrandCode: "BrandCode",
				BrandName: "BrandName",
				CostPrice: "CostPrice",
				SalePrice: "SalePrice",
				Attachment: "Attachment",
				State: "State",
			},
			queryList: {
				OrgCode: this.orgCode,
				BrandCode: this.brandCode,
				GroupTypeCode: "046002,046003",
				GoodsCode: "",
				GoodsName2: "",
				UomCode: "",
				GoodsType:"",
				SubGoodsType:"",
				State: "",
			},
			result: "", // 运行结果
			props1: {
				checkStrictly: true,
				emitPath: false,
			},
			optionsBrand: [],
			group: [],
		};
	},
	methods: {
		//表格选择后回调事件
		selectionChange(selection) {
			this.selectionRows = selection;
		},

		async opBindData() {
			//this.$refs.mytable.clearSort();
			this.$refs.mytable.getData();
		},

		formatterState(rowData) {
			// eslint-disable-next-line no-debugger
			//debugger;
			switch (rowData.State) {
				case "0":
					return "禁用";
				case "1":
					return "启用";
				default:
					return "";
			}
		},
		//加载树数据getGroup
		async getTree() {
			this.showGrouploading = true;
			var head = new publicjs.head();
			//publicjs.initHead(head, "query");
			publicjs.initHead(head, "brandgoodstype");
			var ed = new publicjs.entitydata(head);
			var eo = new publicjs.entityobj();
			eo.AttrList = {
				Name: "BrandGoodsType",
				Type: "1",
			};
			eo.ValueList = {
				Code: "id",
				Name: "label",
				ParentCode: "parentId",
			};
			eo.QueryList = {
				BrandCode: this.queryList.BrandCode,
				OrgCode: this.queryList.OrgCode,
				
			};
			eo.OrderList = { Code: "asc" };
			ed.Data.Content.ObjectList.Object.push(eo);
			try {
				var returnValueStr = await this.$API.auth.objProcess.post(ed);
				var returnValue = JSON.parse(returnValueStr);
				let result = JSON.parse(returnValue.Result.Content);
				this.group = result;
				this.showGrouploading = false;
			} catch (error) {
				this.showGrouploading = false;
				this.$alert(error.message, "提示", { type: "error" });
				return false;
			}
		},
		groupClick(data) {
			this.queryList.GoodsType = "";
			this.queryList.SubGoodsType = "";
			if (data.id.length == 6) {
				this.queryList.GoodsType = data.id;
			} else if (data.id.length == 8) {
				this.queryList.SubGoodsType = data.id;
			}
			this.$refs.mytable.clearSort();
			this.$refs.mytable.getData();
		},
		async initBrandOptions() {
			var head = new publicjs.head();
			publicjs.initHead(head, "getfirstdatasource");
			var ed = new publicjs.entitydata(head);
			var eo = new publicjs.entityobj();
			eo.AttrList = {
				Name: "Brand",
				AcceptControl: "Code",
				OrgCode: "",
			};
			ed.Data.Content.ObjectList.Object.push(eo);

			try {
				var returnValueStr = await this.$API.auth.objProcess.post(ed);
				var returnValue = JSON.parse(returnValueStr);
				if (returnValue.Result.OpFlag == "1") {
					var objectList =
						returnValue.Result.Content.ObjectList.Object;
					this.optionsBrand = objectList.rows.row;
				} else {
					this.$message.error("操作失败:" + returnValue.Result.OpMsg);
				}
			} catch (error) {
				this.loading = false;
				this.$alert(error.message, "提示1", { type: "error" });
				return false;
			}
		},
		selectable(row) {
			if (row.ParentCode == "00") {
				return false;
			}
			return true;
		},
	},
	async mounted() {
		await this.getTree();
		await this.opBindData();
		await this.initBrandOptions();
	},
};
</script>
